<template>
  <view class="main">
	<tabar :current="0"></tabar>	
	<view class="class_h" style="background: linear-gradient(180deg, #91c8ec 0%, #ECF0F6 28.08%)">
	        <view class="top">血糖血压小程序</view>
	   
		    <view class="flex blood_top mr-30">
				<view class="flex">
					<image src="/static/resource/blood_sugar.png" class="blood_sugar" v-if="blood_type ==1 " @click="select_blood(1)"></image>
					<image src="/static/resource/blood_sugar1.png" class="blood_pressure" v-if="blood_type ==2 " @click="select_blood(1)"></image>
				</view>
				<view class="flex ml-20">
					<image src="/static/resource/blood_pressure.png" class="blood_pressure" v-if="blood_type ==1 " @click="select_blood(2)"></image>
					<image src="/static/resource/blood_pressure1.png" class="blood_sugar" v-if="blood_type ==2 " @click="select_blood(2)"></image>
				</view>
		    </view>
		   
		   <!-- 血糖 -->
		   <view class="flex total"  v-if="blood_type ==1 "> 		   
			   <view class="containers">
					<!-- 胶囊背景 -->
					<view class="capsule-bg">
						<view
						  v-for="(item, index) in options"
						  :key="index"
						  :class="['capsule', selectedIndex === index ? 'active' : '']"
						  @click="selectOption(index)"
						>
						  {{ item.label }}
						</view>
					</view>
				  
					  <!-- 时间显示 -->
					<!-- <view class="time-range" v-if="formattedRange"> -->
						<!--  {{ formattedRange }} -->
					<!-- </view> -->
				</view>			   
			   
				<view class="effect_title">
					<view class="flex justify-start align-center text-center">
						<view class="flex">
							<image src="../../static/resource/sugar_icon.png" mode="aspectFill" style="width: 18px;height: 18px;"></image>
						</view>
						<text class="effect_t ml-15">血糖（mmol/L）</text>
					</view>
					
				</view>
				<BloodSugarCurve
					 :width="340"
						   :height="240"
						   :data="sugar_value"
						   :xLabels="sugar_date"
					/>
				<view class="flex justify-center align-center text-center mt-20 mb-20">
					<image src="../../static/resource/blood.png" mode="aspectFill" style="width: 165px;height: 22px;"></image>
				</view>
		   </view>
		   
		   
		   <!-- 血压 -->
		   <view class="flex total"  v-if="blood_type ==2 ">
			   
			   <view class="containers">
					<!-- 胶囊背景 -->
					<view class="capsule-bg">
						<view
						  v-for="(item, index) in options"
						  :key="index"
						  :class="['capsule', selectedIndex === index ? 'active' : '']"
						  @click="selectOption(index)"
						>
						  {{ item.label }}
						</view>
					</view>
				  
					  <!-- 时间显示 -->
					<!-- <view class="time-range" v-if="formattedRange"> -->
							<!--  {{ formattedRange }}
					</view>-->
				</view>
							
							
				<view class="effect_title">
					<view class="flex justify-start align-center text-center">
						<view class="flex">
							<image src="../../static/resource/pressure_icon.png" mode="aspectFill" style="width: 18px;height: 18px;"></image>
						</view>
						<text class="effect_t ml-15">血压（mmhg）</text>
					</view>
				</view>
				<blood-pressure-chart
					  :width="340"
					  :height="240"
					  :sbp="sbpData"
					  :dbp="dbpData"
					  :x-labels="xLabels"
					/>
				<view class="flex justify-center align-center text-center mt-20 mb-20">
					<image src="../../static/resource/blood.png" mode="aspectFill" style="width: 165px;height: 22px;"></image>
				</view>
		   </view>	
			  
			  
			<view class="flex total">
			  	<view class="flex justify-start align-center text-center effect_title border-b pb-20">
			  		<view class="flex">
			  			<image src="../../static/resource/report.png" mode="aspectFill" style="width: 18px;height: 18px;"></image>
						<text class="effect_t ml-15">健康报告</text>
			  		</view>			  		
			  	</view>	
				<view class="flex">
					<text class="report_text">近一周血糖 存在波动，但整体呈下降趋势，请注意保持健康生活方式！</text>
				</view>
			</view>
			  
			  
        </view>	
  </view>
</template>

<script>
	import iCircle from '@/components/xiaoran-circle/xiaoran-circle.vue';
	import tmenu from '@/components/menu/index.vue';
	import BloodSugarCurve  from '@/components/dui-line-chart/BloodSugarChart.vue'
	import BloodPressureChart   from '@/components/dui-line-chart/BloodPressureChart.vue'
	export default {
		components: {
			iCircle,
			tmenu,
			BloodSugarCurve,
			BloodPressureChart,		
		},		
		data() {
			const app = getApp()
			return {
				...getApp().globalData.config,
				percent: 90,
				blood_type:1,
				sbpData: [], //收缩压 范围	说明90 ~ 140 mmHg
				dbpData: [], //舒张压（DBP）正常值 60 ~ 90 mmHg
				xLabels: [],		
				sugar_date:[], // 血糖日历
				sugar_value:[],//血糖信息
				options: [					
					{ label: '近一周', range: 7 },
					{ label: '近一月', range: 30 },
					{ label: '近三月', range: 90 },
					{ label: '全部', range: null },
				],
				selectedIndex: 0,
				startDate: '',
				endDate: '',
				user_info:{}
					
					
					
			}
		},
		onShow() {
			let user_info=uni.getStorageSync('userInfo');
			let that=this;
			if(user_info){
				let obj_data={
					token:user_info.token,
				    login_type:'app'
				};
				this.$http.getUser(obj_data).then(res=>{				
					if(res.resCode=='9999'){
						uni.setStorageSync('userInfo',res.data);	
					    that.userInfo=res.data			
					}				
				})	
				this.query_index()
			}else{
				 that.userInfo=''
			}
		}, 
		computed: {
			color() {
				let color = '#6EBA44';
				if (this.percent == 100) {
					color = '#5cb85c';
				}
				return color;
			}
		},
		onReady() {
		  this.$nextTick(() => {
		    this.option = { ...this.option }  // 强制触发更新
		  })
		},
		computed: {
		    formattedRange() {
		      if (!this.startDate || !this.endDate) return ''
		      return `${this.startDate} ~ ${this.endDate}`
		    }
		  },
		 mounted() {
		    this.selectOption(0) // 初始化默认选中“全部”
		  },
		methods: {
			...getApp().globalData.funcion,
			
			//获取信息
			query_index(){
				if(!uni.getStorageSync('userInfo').token) return
				let obj={
					token:uni.getStorageSync('userInfo').token,
					blood_type:this.blood_type,
					selectedIndex:this.selectedIndex,
					startDate: this.startDate,
					endDate: this.endDate,					
				}	
				
				this.$http.Index(obj).then(res => {
					if (res.resCode == '9999') {	
						console.log('接口成功');
						if(obj.blood_type==1){
							this.sugar_value = res.data.sugar_value;
							this.sugar_date = res.data.sugar_date;
						}else{
							this.xLabels=res.data.sugar_date
							this.sbpData=res.data.blood_sbp
							this.dbpData=res.data.blood_dbp
						}
						
					} else {
						this.sugar_date = [];
					}
				});			
			},
			
			select_blood(type){
				this.blood_type=type
				this.query_index()
			},
			
			selectOption(index) {
			      this.selectedIndex = index
				  let that = this
			
			      const today = new Date()
			      const pad = (n) => n.toString().padStart(2, '0')
			      const formatDate = (date) =>
			        `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
			
			      const rangeDays = this.options[index].range
			      if (!rangeDays) {
			        this.startDate = ''
			        this.endDate = ''
					this.query_index()
			      } else {
			        const start = new Date()
			        start.setDate(today.getDate() - (rangeDays - 1))
			        this.startDate = formatDate(start)
			        this.endDate = formatDate(today)
					this.query_index()
			      }
				
			}
			
		}
	  
	};
</script>

<style scoped>
  @import "./index.css";
</style>
